<template>
  <view class="user">
    <view class="user_hd">
      <view class="pagenation">
        <view class="pagenation_title"> 个人中心 </view>
      </view>
      <view class="user_info">
        <view class="user_other">
          <!-- <view class="user_other_item user_score">
						<view class="user_other_item_num">
							0
						</view>
						<view class="user_other_item_name">
							积分
						</view>
					</view>
					<view class="user_ohter_line">
						
					</view> -->
          <view class="user_msg" @click="toInfo()">
            <view class="user_msg_attr">
              <image :src="user.userImg" mode="aspectFill"></image>
            </view>
            <view class="user_msg_content">
              <view class="user_msg_name"> 昵称:{{ user.userName }} </view>
              <!-- <view class="user_msg_phone">
										<image src="../../static/image/memberCenter/phone.svg" mode=""></image>
										<text>15800000000</text>
									</view> -->
            </view>
          </view>
          <!--    <view class="user_other_item user_money">
            <view class="user_other_item_num"> ￥{{ money }} </view>
            <view class="user_other_item_name"> 全部余额 </view>
          </view> -->
        </view>
      </view>
    </view>
    <view class="user_bd">
      <view class="user_functions">
        <view class="user_function" @tap="toMoney()">
          <view class="user_function_icon">
            <image
              src="../../static/image/memberCenter/ticket.svg"
              mode=""
            ></image>
          </view>
          <view class="user_function_title"> 我的提现 </view>
          <view class="user_function_more">
            <uni-icons type="forward" size="16" color="#666"></uni-icons>
          </view>
        </view>
        <view class="user_function" @tap="toPayDetail()">
          <view class="user_function_icon">
            <image
              src="../../static/image/memberCenter/Edit.svg"
              mode=""
            ></image>
          </view>
          <view class="user_function_title"> 我的流水 </view>
          <view class="user_function_more">
            <uni-icons type="forward" size="16"></uni-icons>
          </view>
        </view>
        <view class="user_function" @tap="toInfo()">
          <view class="user_function_icon">
            <image
              src="../../static/image/memberCenter/address.svg"
              mode=""
            ></image>
          </view>
          <view class="user_function_title"> 我的资料 </view>
          <view class="user_function_more">
            <uni-icons type="forward" size="16"></uni-icons>
          </view>
        </view>
        <view class="user_function">
          <view class="user_function_icon"> </view>
          <view class="user_function_title"> 是否自动接单 </view>
          <view class="user_function_more">
            <switch
              color="#ff8d1a"
              :checked="autoOrder == 1"
              @change="(e) => editAutoOrders(e, 1)"
            />
          </view>
        </view>
        <view class="user_function">
          <view class="user_function_icon"> </view>
          <view class="user_function_title"> 是否开店 </view>
          <view class="user_function_more">
            <switch
              color="#ff8d1a"
              :checked="openStore == 1"
              @change="(e) => editAutoOrders(e, 2)"
            />
          </view>
        </view>
        <view style="margin-top: 30px">
          <button
            @tap="toGetMoney()"
            style="background-color: rgba(255, 141, 26, 1)"
            type="primary"
          >
            提现
          </button>
        </view>
      </view>
    </view>
    <uni-popup ref="popup" type="center" :maskClick="true">
      <view style="background-color: #fff">
        <input
          style="height: 40px"
          type="text"
          placeholder="请输入提现金额"
          v-model="amount"
        />
        <button type="default" @tap="topay()">确定</button>
      </view>
    </uni-popup>

    <tabBar current="3"></tabBar>
  </view>
</template>

<script>
import {
  getWallet,
  payMoney,
  getAutoOrders,
  editAutoOrders,
  getMyInfo,
} from "../../api/api.js";
export default {
  data() {
    return {
      money: 0,
      amount: null, //提现
      autoOrder: 2, //自动接单
      openStore: 2, //是否开店
      id: "", //店铺ID
      user: {
        userImg: "",
        userName: "",
      },
    };
  },
  onShow() {
    this.queryMyInfo();
  },
  methods: {
    queryMyInfo() {
      getMyInfo().then((res) => {
        console.log(res.data.userImg, "头像");
        console.log(res.data.userName, "名字");
        this.user.userImg = res.data.userImg;
        this.user.userName = res.data.userName;
        // this.user = res.data;
      });
    },
    toGetMoney() {
      this.$refs["popup"].open();
    },
    topay() {
      if (this.amount) {
        payMoney({ amount: this.amount }).then((res) => {
          uni.showToast({
            title: "操作成功",
            icon: "none",
            duration: 2000,
          });
        });
      }
    },
    // 我的资料
    toInfo() {
      uni.navigateTo({
        url: "/pages/memberCenter/information",
      });
    },
    // 我的流水
    toPayDetail() {
      uni.navigateTo({
        url: "/pages/memberCenter/payList",
      });
    },
    // 我的提现
    toMoney() {
      uni.navigateTo({
        url: "/pages/memberCenter/records",
      });
    },
    // 修改自动接单和是否开店
    editAutoOrders(e, type) {
      let params = {
        id: this.id,
      };
      if (type == 1) params.autoOrder = e.detail.value ? 1 : 2;
      else params.status = e.detail.value ? 1 : 2;
      editAutoOrders(params)
        .then(() => {
          this.getAutoOrders();
          uni.showToast({
            title: "操作成功",
            icon: "none",
            duration: 2000,
            mask: true,
          });
        })
        .catch(() => {
          uni.showToast({
            title: "操作失败",
            icon: "none",
            duration: 2000,
            mask: true,
          });
        });
    },
    // 获取开关详细信息
    getAutoOrders() {
      getAutoOrders().then((res) => {
        this.autoOrder = res.data.autoOrder;
        this.openStore = res.data.status;
        this.id = res.data.id;
      });
    },
  },
  onLoad() {
    getWallet().then((res) => {
      if (res.data.amount) {
        this.money = res.data.amount;
      }
    });
    this.getAutoOrders();
  },
};
</script>

<style lang="scss">
.user_hd {
  width: 100%;
  height: 640rpx;
  padding: 70rpx 32rpx 0;
  // background: url('../../static/image/memberCenter/bg.png') no-repeat center center;
  background: linear-gradient(
    180deg,
    rgba(255, 141, 26, 1) 12.5%,
    rgba(255, 195, 0, 1) 100%
  );

  background-size: cover;

  .pagenation_title {
    text-align: center;
    color: #fff;
    font-size: 36rpx;
    font-weight: 500;
  }
  .user_info {
    .user_msg {
      position: relative;
      display: flex;
      align-items: center;
      margin-top: 26rpx;
      .user_msg_attr {
        width: 124rpx;
        height: 124rpx;
        border-radius: 50%;
        overflow: hidden;
        border: 4rpx solid #fff;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .user_msg_title {
        margin-left: 15rpx;
        font-weight: 500;
        font-size: 36rpx;
        color: #fff;
      }
      .user_msg_login {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 150rpx;
        height: 64rpx;
        border-radius: 64rpx;
        background-color: #fff;
        color: #2588ff;
        font-size: 24rpx;
        font-weight: bolder;
      }
      .user_msg_content {
        margin-left: 15rpx;
        .user_msg_name {
          font-size: 36rpx;
          font-weight: 500;
          color: #fff;
        }
        .user_msg_phone {
          margin-top: 5rpx;
          image {
            width: 22rpx;
            height: 22rpx;
          }
          text {
            color: #fff;
            font-size: 28rpx;
            margin-left: 8rpx;
          }
        }
      }
    }
    .user_other {
      display: flex;
      // justify-content: space-around;
      align-items: center;
      // margin-top: 80rpx;
      padding: 0 30rpx;
      .user_other_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .user_other_item_num {
          font-size: 28rpx;
          color: #fff;
          margin-bottom: 10rpx;
        }
        .user_other_item_name {
          font-size: 28rpx;
          color: #fff;
        }
      }
      .user_ohter_line {
        width: 2rpx;
        height: 40rpx;
        background-color: #fff;
      }
    }
  }
}
.user_bd {
  padding: 40rpx 32rpx 180rpx;
  border-radius: 32rpx 32rpx 0 0;
  background-color: #f4f4f4;
  margin-top: -200rpx;
  min-height: calc(100vh - 500rpx);
  .user_banner {
    height: 220rpx;
    image {
      width: 100%;
      height: 100%;
      border-radius: 12rpx;
    }
  }
  .user_functions {
    .user_function {
      position: relative;
      display: flex;
      align-items: center;
      height: 90rpx;
      padding: 0 24rpx;
      border-radius: 12rpx;
      background-color: #fff;
      margin-top: 20rpx;
      .user_function_icon {
        margin-top: 10rpx;
        image {
          width: 42rpx;
          height: 42rpx;
        }
      }
      .user_function_title {
        font-size: 24rpx;
        color: #666;
        margin-left: 15rpx;
      }
      .user_function_more {
        position: absolute;
        right: 24rpx;
      }
    }
  }
}
</style>
